<template>
    <div>
        <div class="detailHeader">
            <h2 style="color: #2d3a4b">文章名称 : {{details.title}}</h2>
            <span>所属分类 : {{details.category.catename}}</span>
            <span>浏览量 : {{details.views}}</span>
        </div>

        <div v-html="details.htmlContent">
        </div>
    </div>
</template>

<script>
    export default {
        name: "ArticleDetails",
        data(){
            return{
                articleId:0,
                details:{}
            }
        },
        methods:{
            initArticleDetails(){
                this.$getRequest('/article/getArticleDetailsById?id='+this.articleId).then(resp=>{
                    if(resp){
                        this.details = resp;
                    }
                })
            }
        },
        mounted() {
            if(this.$route.query.id){
                this.articleId = this.$route.query.id
            }
            this.initArticleDetails();
        }
    }
</script>

<style scoped>
    .detailHeader{
        margin: 10px 0;
        text-align: center;
        color: #409EFF;
    }

    .detailHeader span{
        margin: 5px 10px;
        font-size: 14px;
    }
</style>